<template>
  <view class="yiteng-page">
    <!-- 顶部自定义导航栏（背景#5555ff + 标题居中） -->
    <view class="custom-nav">
      <text class="nav-title">易腾工单-欢迎</text>
    </view>

    <!-- 顶部品牌区域（下移适配导航栏） -->
    <view class="brand-header">
      <view class="logo-container">
        <view class="logo-icon">
          <text class="icon-text">易</text>
        </view>
        <view class="logo-text">
          <text class="main-title">易腾工单派单管理系统</text>
          <text class="sub-title">高效、简便、轻量化的工单派单解决方案</text>
        </view>
      </view>
    </view>

    <!-- 产品简介卡片 -->
    <view class="intro-card">
      <view class="card-header">
        <view class="header-line"></view>
        <text class="card-title">易腾产品简介</text>
        <view class="header-line"></view>
      </view>
      
      <view class="card-content">
        <text>易腾是一个适用于中小企业、部门内部、创业团队及个人的工单派单管理工具。从微信下单,电脑派单,工人进度上报,进度查询，客户评价,一站式的互联网解决方案。</text>
        <text class="mt-2">适用于维修报修、设备维保、安装制作、物流配送、物业管理、本地o2o服务、生产管理、内部任务派单等行业。</text>
      </view>
    </view>

    <!-- 功能特点简要展示 -->
    <view class="features">
      <view class="feature-item">
        <view class="feature-icon">
          <text class="icon">✓</text>
        </view>
        <text class="feature-text">简单易用</text>
      </view>
      <view class="feature-item">
        <view class="feature-icon">
          <text class="icon">✓</text>
        </view>
        <text class="feature-text">高效派单</text>
      </view>
      <view class="feature-item">
        <view class="feature-icon">
          <text class="icon">✓</text>
        </view>
        <text class="feature-text">实时跟踪</text>
      </view>
    </view>

    <!-- 底部“点击开始使用”按钮 -->
    <button class="start-btn" @click="handleStart">
      <text>点击开始使用</text>
    </button>
    
    <!-- 页脚信息 -->
    <view class="footer">
      <text>© 2025 易腾工单系统 版权所有</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "YitengPage",
  methods: {
    handleStart() {
      // 点击按钮跳转到登录页面
      uni.navigateTo({
        url: "/pages/login/login"
      });
    },
  },
};
</script>

<style scoped>
/* 基础样式：添加导航栏高度偏移，避免内容被遮挡 */
.yiteng-page {
  min-height: 100vh;
  background-color: #f9fafd;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /* 适配顶部导航栏高度 */
  padding-top: 120rpx;
  position: relative;
}

/* 顶部自定义导航栏（核心样式） */
.custom-nav {
  position: fixed; /* 固定在顶部 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100rpx; /* 导航栏高度 */
  background-color: #5555ff; /* 导航栏背景色 */
  display: flex;
  align-items: center;
  justify-content: center; /* 标题水平居中 */
  z-index: 999; /* 确保在最上层，不被内容遮挡 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 轻微阴影增强层次 */
}
.nav-title {
  font-size: 36rpx; /* 标题字号 */
  color: #fff; /* 标题文字白色 */
  font-weight: bold; /* 标题加粗 */
}

/* 顶部品牌区域：调整间距适配导航栏 */
.brand-header {
  width: 100%;
  margin: 20rpx 0 60rpx; /* 减少顶部间距 */
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: #165DFF;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.2);
}

.icon-text {
  color: white;
  font-size: 40rpx;
  font-weight: bold;
}

.main-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #1D2129;
  display: block;
  line-height: 1.4;
}

.sub-title {
  font-size: 26rpx;
  color: #86909C;
  display: block;
  margin-top: 8rpx;
}

/* 产品简介卡片（保持不变） */
.intro-card {
  width: 100%;
  background-color: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 60rpx;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.header-line {
  flex: 1;
  height: 2rpx;
  background-color: #E5E6EB;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
  padding: 0 20rpx;
}

.card-content {
  font-size: 28rpx;
  color: #4E5969;
  line-height: 1.6;
}

.mt-2 {
  display: block;
  margin-top: 20rpx;
}

/* 功能特点（保持不变） */
.features {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 80rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon {
  width: 60rpx;
  height: 60rpx;
  background-color: #E8F3FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.icon {
  color: #165DFF;
  font-size: 28rpx;
  font-weight: bold;
}

.feature-text {
  font-size: 26rpx;
  color: #4E5969;
}

/* 开始使用按钮（保持不变） */
.start-btn {
  width: 80%;
  height: 96rpx;
  background-color: #165DFF;
  color: white;
  font-size: 34rpx;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 60rpx;
  box-shadow: 0 6rpx 16rpx rgba(22, 93, 255, 0.3);
  transition: all 0.3s ease;
  border: none;
}

.start-btn:active {
  background-color: #0E42D2;
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.2);
}

.arrow {
  margin-left: 12rpx;
  font-size: 30rpx;
}

/* 页脚（保持不变） */
.footer {
  font-size: 22rpx;
  color: #86909C;
  margin-bottom: 30rpx;
}
</style>